<template>
  <div class="body">
    <!-- 头部区域 -->
    <header class="header">

    </header>
    <!-- 导航栏 -->
    <nav class="nav">
      <ul>
        <li v-for="(item,index) in navList" :key="index">
          {{item}}
        </li>
      </ul>
    </nav>
    <!-- 轮播图 -->
    <div class="lunbotu">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in banner" :key="item">
          <!-- <h3 class="medium">{{ item.name }}</h3> -->
          <img :src="item.imageUrl" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="musicList">
      <div class="musiclist-item" v-for="item of music" :key="item.id">
        <div><img :src="item.picUrl" alt="" /></div>
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: ['推荐','排行榜','歌单','直播电台','歌手','新碟上架'],
      lunbocolor: [],
      queryInfo: { limit: 30 },
      banner: [],
      music: [],
    };
  },
  created() {
    this.getMusic();
    this.getBanner();
  },
  methods: {
    async getMusic() {
      const { data: res } = await this.$https.get("personalized", {
        params: this.queryInfo,
      });
      if (res.code !== 200) {
        this.$message.error("获取消息失败");
      }
      this.music = res.result;
    },
    async getBanner() {
      const { data: res } = await this.$https.get("banner", {
      });
      if (res.code !== 200) {
        this.$message.error("获取消息失败");
      }
      console.log(res.banners)
      this.banner = res.banners
    }
  },
  mounted() {
       
     
  }
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.body {
  background-color: #F5F5F5;
}
.header {
  height: 60px;
  background-color: #242424;
}
.nav {
  display: flex;
  justify-content: center;
  height: 40px;
  background-color: #C20C0C;
  ul {
    display: flex;
    justify-content: space-around;
    width: 600px;
    li {
      list-style: none;
      height: 40px;
      line-height: 40px;
      color: white;
    }
  }
}
.lunbotu {
  width: 100%;
  height: 300px;
  background-color: #D0DD74;
  position: relative;
}
.el-carousel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1050px;
  margin: 0 auto;
  padding-top: 15px;
}
.el-carousel__item {
  border-radius: 10px;
  img { 
    height: 100%;
  }
}
.musicList {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .musiclist-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 350px;
    span {
      width: 200px;
    }
    img {
      height: 200px;
      border: 5px solid skyblue;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }
  }
}
</style>